import GeekIcon from "@shared/geekIcon";
import { Link, useLocation } from "react-router-dom";
import styles from "@shared/tabbar/styles/styles.module.less";
import classNames from "classnames";

// 实现高亮

export default function Tabbar() {
    const { pathname } = useLocation();
    return (
        <div className={styles.tabbar}>
        <Link
          to="/"
          className={classNames({ [styles.active]: pathname === "/" })}
        >
          <GeekIcon
            type={pathname === "/" ? "iconbtn_home_sel" : "iconbtn_home"}
            className={styles.icon}
          />
          <span>首页</span>
        </Link>
        <Link
          to="/question"
          className={classNames({
            [styles.active]: pathname === "/question",
          })}
        >
          <GeekIcon
            type={pathname === "/question" ? "iconbtn_qa_sel" : "iconbtn_qa"}
            className={styles.icon}
          />
          <span>问答</span>
        </Link>
        <Link
          to="/video"
          className={classNames({
            [styles.active]: pathname === "/video",
          })}
        >
          <GeekIcon
            type={pathname === "/video" ? "iconbtn_video_sel" : "iconbtn_video"}
            className={styles.icon}
          />
          <span>视频</span>
        </Link>
        <Link
          to="/mine"
          className={classNames({
            [styles.active]: pathname === "/mine",
          })}
        >
          <GeekIcon
            type={pathname === "/mine" ? "iconbtn_mine_sel" : "iconbtn_mine"}
            className={styles.icon}
          />
          <span>我的</span>
        </Link>
      </div>
    );
}